<template>
	<div>
		<el-row :gutter="24">
			<!--<el-col :span="1" style="margin-right:30px;">
				<p class="queryLabel">车辆销售状态:</p>
			</el-col>
			<el-col :span="3" style="margin-right: 0px;">
				<el-select size="small" v-model="condition.saleType" placeholder="请选择车辆销售状态" clearable>
					<el-option v-for="item in saleType" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>-->
			<el-col :span="1" style="margin-right:30px;">
				<p class="queryLabel">销售日期:</p>
			</el-col>
			<el-col :span="3">
				<el-date-picker size="small" style="width: 100%;" v-model="condition.saleDateStart" format="yyyy-MM-dd" :editable=false type="date" placeholder="起始日期">
				</el-date-picker>
			</el-col>
			<el-col :span="1" style="margin-right:-20px;">
				<p class="queryLabel">至</p>
			</el-col>
			<el-col :span="3" style="margin-right:0px;">
				<el-date-picker size="small" style="width: 100%;" v-model="condition.saleDateStop" format="yyyy-MM-dd" :editable=false type="date" placeholder="结束日期">
				</el-date-picker>
			</el-col>
			<el-col :span="1" style="margin-right:0px;">
				<p class="queryLabel">车型:</p>
			</el-col>
			<el-col :span="3" style="margin-right:0px;">
				<el-input size="small" placeholder="请选择车型" icon="search" v-model="carModelName" :on-icon-click="handleIconClick">
				</el-input>
			</el-col>
			<el-col :span="2" style="text-align: right;">
				<p class="queryLabel">VIN:</p>
			</el-col>
			<el-col :span="3" style="text-align: left;margin-left: 5px;">
				<el-input placeholder="请输入VIN" size="small" style="width: 100%; " v-model="condition.vin">
				</el-input>
			</el-col>
			<!--<el-col :span="1" style="margin-right:0px;">
				<p class="queryLabel">仓库:</p>
			</el-col>
			<el-col :span="3" style="margin-right: 0px;">
				<el-select size="small" v-model="condition.warehouseType" placeholder="请选择仓库" clearable>
					<el-option v-for="item in warehouseType" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>-->

			<el-col :span="4" style="text-align: right">
				<el-button type="primary" size="small" @click="clean">清空查询条件</el-button>
				<el-button type="primary" size="small" v-on:click='carSaleQuery'>查询</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList" border style="width: 100%;align-content: center;" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="60">
					</el-table-column>
					<el-table-column label="VIN" prop="vin" width="180">
					</el-table-column>
					<el-table-column label="采购日期" align="right" prop="purchaseDate1" width="120">
					</el-table-column>
					<el-table-column label="车型" align="right" prop="modelName" width="120">
					</el-table-column>
					<el-table-column label="发动机号" align="right" prop="engineNum" width="120">
					</el-table-column>
					<el-table-column label="销售价格" align="right" prop="invoicePrice" width="120">
					</el-table-column>
					<el-table-column label="初次入库时间" width="140" align="right" prop="enterWarehouseDateStart">
					</el-table-column>
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>

		<!--
        	作者：hongchao_zhu@hongdee-info.com
        	时间：2017-05-11
        	描述：车型车系选择框
        -->

		<el-dialog title="选择车系" v-model="showStart" size="small">
			<el-row :gutter="24">
				<el-col :span="11" style="margin-left:5px;">
					<el-input size="small" v-model="dictTreeSearchValue" placeholder="请输入内容" icon="search" @click="searchTree"></el-input>
				</el-col>
				<el-col :span="11" style="margin-left:5px;">
					<!--<el-select size="small"
						           style="width: 100%;margin-left:15px;"
						           v-model="company"
						           placeholder="请选择品牌"
						           clearable>
							<el-option v-for="item in companyData"
							           :label="item.label"
							           :value="item.value"></el-option>
						</el-select>-->
				</el-col>
				<el-col :span="24" style="margin-left:5px;">
					<div style="height: 3em;"></div>
				</el-col>
				<el-col :span="24" style="margin-left:5px;">
					<el-tree :data="paramTreeData" :filter-node-method="filterNode" :highlight-current=true :props="defaultProps" accordion @node-click="handleNodeClick" :auto-expand-parent=false ref="dictTree" node-key="id"></el-tree>
				</el-col>
			</el-row>

			<div slot="footer" class="dialog-footer">
				<el-button @click="showStart = false">取 消</el-button>
				<el-button type="primary" @click="saveCarSerices">提 交</el-button>
			</div>
		</el-dialog>

	</div>
</template>
<script>
	import moment from 'moment'
	export default {
		data: function() {
			return {

				//仓库类型下拉
				warehouseType: [],

				//合格证状态
				certificateStatusCovertData: {},

				//车辆销售状态下拉
				saleType: [{
						label: "可售",
						value: "1",
					},
					{
						label: "不可售",
						value: "2",
					},
				],
				carModelName: "",
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//公司数据
				tableData: {
					total: 0,
					dataList: []
				},

				condition: {
					saleType: "",
					carModelCode: "",
					warehouseType: "",
					saleDateStart: "",
					saleDateStop: "",
					status: "2",
					vin:"",
				},
				conditions: {
					saleType: "",
					carModelCode: "",
					warehouseType: "",
					saleDateStart: "",
					saleDateStop: "",
					status: "2",
					vin:"",
				},
				//warehouseFormShow: false,
				//校验规则
				Rule: {

				},

				multipleSelection: [],
				companyId: "",

				//树形图查询条件
				dictTreeSearchValue: "",
				paramTreeData: [],
				//树型数据配置
				defaultProps: {
					children: 'child',
					label: 'label',
				},
				showStart: false,

				//选中的类型（车型/车系）
				carType: '',
				//选择的车辆信息
				datalabel: '',
				datavale: '',

			}
		},
		methods: {
			//清空查询条件
			clean: function() {
				this.$data.condition.saleDateStart = "";
				this.$data.condition.saleDateStop = "";
				this.$data.condition = Object.assign(this.$data.condition, this.$data.conditions);
				this.$data.carModelName = "";
				debugger;
			},
			//销售状态转换
			carSaleStatusCov: function(row, column) {
				return row.saleType == "2" ? '不可售' : '可售';
			},

			//合格证状态转换
			certificateStatusCov: function(row, column) {
				return this.$data.certificateStatusCovertData[row.certificateStatus];
			},

			certificateStatusCovert: function() {
				this.$http.get(this.API_ROOT + '/base/dict/convert', {
					params: {
						group: "scmCertificateStatus"
					}
				}).then((response) => {
					this.$data.certificateStatusCovertData = response.data;
				}, (response) => {});
			},

			//仓库类型转换
			warehouseTypeCov: function(row, column) {
				return row.warehouseType == "0" ? '虚拟库' : '实体库';
			},

			//财务归属类型转换
			carFinancialBelongCov: function(row, column) {
				return row.financialBelong == "0" ? '本店' : '非本店';
			},

			//确认车型
			saveCarSerices: function() {
				debugger;
				if(this.$data.carType == '2') {
					this.$data.carModelName = this.$data.datalabel;
					this.$data.condition.carModelCode = this.$data.datavale;
				} else {
					this.$message("未选中车型");
				}
				this.$data.showStart = false;
			},

			//打开车型车系选择
			handleIconClick: function() {
				this.$data.showStart = true;
			},

			//查询树节点
			searchTree: function() {
				if(this.$data.dictTreeSearchValue == "") {
					this.$message("请输入查询条件");
					this.queryParamTree();
					return;
				}
				this.$refs.dictTree.filter(this.$data.dictTreeSearchValue);
			},
			//点击资源树节点
			handleNodeClick(data) {
				debugger;
				this.$data.carType = data.type;
				this.$data.datalabel = data.label;
				this.$data.datavale = data.value;
			},
			//查询参数树
			queryParamTree: function() {
				//获取资源树
				debugger;
				this.$http.get(this.API_ROOT + '/base/car/tree', {}).then((response) => {
					this.$data.paramTreeData = response.data;
				}, (response) => {});
			},
			//资源过滤
			filterNode: function(value, data, node) {
				if(!value) return true;
				return data.label.indexOf(value) !== -1;
			},

			//选择框
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
			},

			//			add: function() {
			//				this.$data.warehouseFormData = Object.assign(this.$data.warehouseFormData, this.$data.emptyWarehouseFormData);
			//				this.$data.warehouseFormShow = true;
			//			},

			//查询销售车辆
			carSaleQuery: function() {
				debugger;
				this.$data.condition.saleDateStart = this.momentFu(this.$data.condition.saleDateStart);
				this.$data.condition.saleDateStop = this.momentFu(this.$data.condition.saleDateStop);
				this.$http.post(this.API_ROOT + '/scm/saleOrder/pageCar', this.$data.condition, {
					params: {
						start: this.$data.CurentPage, //页码
						limit: this.$data.page.pageSize, //每页的数量
					}
				}).then(resp => {
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						// es5写法
						this.$data.tableData = resp.data;
						//this.baseQuery(this.$data.curTreeDeptId);
						//this.$data.exFormShow = false;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
			},
			//时间判断为空的封装
			momentFu: function(dt) {
				if(dt == '' || dt == null || dt == undefined) {
					return "";
				} else {
					return this.moment(dt).format("YYYY-MM-DD");
				}
			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				//this.$data.dictGroup = '';
				this.carSaleQuery();
			},
		},
		//表单创建时执行
		created: function() {
			this.carSaleQuery();
			this.certificateStatusCovert();

			//查找车型
			this.queryParamTree();

			//获取仓库类型下拉
			this.$http.get(this.API_ROOT + '/base/dict/combo', {
				params: {
					group: "warehouse"
				}
			}).then((response) => {
				this.$data.warehouseType = response.data;
			}, (response) => {});

			//获取车辆销售状态下拉
			//			this.$http.get(this.API_ROOT + '/base/dict/combo', {
			//				params: {
			//					group: "scmCarSaleStatus"
			//				}
			//			}).then((response) => {
			//				this.$data.saleType = response.data;
			//			}, (response) => {});

		}
	}
</script>
<style>
	.el-table .info-row {
		height: 10px !important;
	}
	
	.item {
		width: 30px;
	}
	
	.el-form-item {
		clear: both;
	}
	
	.el-dropdown .el-button-group,
	.el-table .el-tooltip,
	.el-table .el-tooltip__rel {
		display: inline;
	}
	
	.el-table {
		height: 100%;
		width: 100%;
	}
	
	#el-select {
		width: 200px;
	}
</style>